$.get('http://127.0.0.1:5000/line').then(res => {
    const myChart = echarts.init(document.getElementById('line'))
    const options = {
        timeline: {
            axisType: 'category',
            data: res.data.map(value => value.name),
            autoPlay: true,
            label: {
                show: false
            }
        },
        xAxis: {
            name: '日期',
            type: 'category',
        },
        yAxis: {
            name: '价格(元/千克)',
            type: 'value',
            splitLine: {
                lineStyle: {
                    color: '#000000'
                }

            }
        },
        series: {
            type: 'line'
        },
        options: res.data.map(value => ({
            title: {
                text: `${value.name}价格趋势`
            },
            xAxis: {
                data: value.label.reverse()
            },
            series: {
                data: value.value.reverse(),
            }
        }))
    }
    console.log(options)
    myChart.setOption(options)
})
$.get('http://127.0.0.1:5000/pie').then(res => {
    const myChart = echarts.init(document.getElementById('pie'))
    const options = {
        title: {
            text: '产品规格占比',
            right: '0'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        series: [
            {
                name: '产品规格',
                type: 'pie',
                radius: '50%',
                data: res.data,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    }
    myChart.setOption(options)
})
$.get('http://127.0.0.1:5000/bar').then(res => {
    const myChart = echarts.init(document.getElementById('bar'))
    const options = {
        title: {
            text:'农产品价格变化率TOP10'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '14%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                name:'农产品名称',
                type: 'category',
                data: res.label,
                axisTick: {
                    alignWithLabel: true
                },
                axisLabel:{
                    rotate:45,
                    fontSize:10
                }
            }
        ],
        yAxis: [
            {
                name:'变化率',
                type: 'value'
            }
        ],
        series: [
            {
                name: 'Direct',
                type: 'bar',
                barWidth: '80%',
                data: res.value,
                label:{
                    show:true,
                    position:'top',
                }
            }
        ]
    }
    myChart.setOption(options)
})
$.get('http://127.0.0.1:5000/boxplot').then(res => {
    const myChart = echarts.init(document.getElementById('boxplot'))
    const options = {
        timeline: {
            axisType: 'category',
            data: res.label,
            autoPlay: true,
            label: {
                show: false
            }
        },
        tooltip: {
            formatter: function (param) {
                return [
                    '月份: ' + param.name + ' ',
                    'Max: ' + param.data[5] + ' 元/千克',
                    'Q3: ' + param.data[4] + ' 元/千克',
                    'Median: ' + param.data[3] + ' 元/千克',
                    'Q1: ' + param.data[2] + ' 元/千克',
                    'Min: ' + param.data[1] + ' 元/千克'
                ].join('<br/>');
            }
        },
        xAxis: {
            name: '农产品',
            type: 'category',
            boundaryGap: true,
            nameGap: 30,
            splitArea: {
                show: false
            },
            splitLine: {
                show: false
            }
        },
        yAxis: {
            name: '价格(元/千克)',
            type: 'value',
            splitArea: {
                show: true
            },
        },
        series: [
            {
                name: '价格',
                type: 'boxplot',
                // datasetIndex: 1
            }
        ],
        options: res.value.map((value,index) => ({
            title:{
                text:`${res.label[index]}价格箱线图`,
                left: 'center'
            },
            dataset: [
                {
                    // prettier-ignore
                    source: [value]
                },
                {
                    transform: {
                        type: 'boxplot',
                        config: {
                            itemNameFormatter: function (params) {
                                return res.label[index];
                            }
                        }
                    }
                },
                {
                    fromDatasetIndex: 1,
                    fromTransformResult: 1
                }
            ],
            series: [{
                datasetIndex: 1
            }]
        }))
    }
    myChart.setOption(options)
})
$.get('http://127.0.0.1:5000/word').then(res => {
    const myChart = echarts.init(document.getElementById('wordcloud'))
    const options = {
        title: {
            text: '农产品价格更新频次',
            left: 'center',
        },
        //数据可以点击
        tooltip: {},
        series: [
            {
                //词的类型
                type: 'wordCloud',
                //设置字符大小范围
                sizeRange: [2, 40],
                rotationRange: [-45, 90],
                textStyle: {
                    color: function () {
                        return 'rgb(' + [
                            Math.round(Math.random() * 200),
                            Math.round(Math.random() * 200),
                            Math.round(Math.random() * 200)
                        ].join(',') + ')';

                    }

                },
                //不要忘记调用数据
                data: res.data

            }
        ]
    }
    myChart.setOption(options)
})
$.get('http://127.0.0.1:5000/mean').then(res => {
    const myChart = echarts.init(document.getElementById('mean'))
    const options = {
        title:{
            text:'农产品价格平均值',
            right:'0'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '6%',
            right: '15%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                name:'农场品名称',
                type: 'category',
                data: res.label,
                axisTick: {
                    alignWithLabel: true
                },
                axisLabel:{
                    fontSize:8,
                    fontWeight:'bold',
                    formatter:(value) =>{
                        return value.split('').join('\n')
                    }
                }
            }
        ],
        yAxis: [
            {
                name:'平均价格(元/千克)',
                type: 'value'
            }
        ],
        series: [
            {
                name: '平均价格',
                type: 'bar',
                barWidth: '60%',
                data: res.value,
                label:{
                    show:true,
                    position:'top',
                    fontSize:8
                }
            }
        ]
    }
    myChart.setOption(options)
})